<template>
    <div class="findpwd">
        <div class="header no-bg fixed">
            <div class="inner">
                <div class="left">
                    <div>
                        <i class="mintui mintui-back" @click="leftEvent"></i>
                    </div>
                </div>
                <div class="title"><span>找回登录密码</span></div>
                <div class="right" @click="rightEvent">
                    <i class="icon iconfont icon-guanbi"></i>
                </div>
            </div>
        </div>
        <div class="iconStep">
            <div :class="{'active':inputValuePhone}">
                <i slot="icon" class="icon iconfont icon-zhengjianhaoma"></i>
                <span>输入号码</span>
            </div>
            <div class="line"></div>
            <div :class="{'active':inputValueCode}">
                <i slot="icon" class="icon iconfont icon-shouji"></i>
                <span>手机验证</span>
            </div>
            <div class="line"></div>
            <div :class="{'active':inputValuePwd || inputValuePwdAgain}">
                <i slot="icon" class="icon iconfont icon-icon2"></i>
                <span>重置密码</span>
            </div> 
        </div>
        <div class="list">
            <div class="bottom-border">
                <mt-field placeholder="请输入手机号" type="tel" disableClear v-model="inputValuePhone"></mt-field>
            </div>
            <countdown @sendValueToParent="getValueFromChild" :mobile="inputValuePhone"></countdown>
        </div>
        <div class="blank-9"></div>
        <div class="list">
            <inputPwd tips="输入新密码" class="bottom-border" @sendPwdToParent="getPwdFromChild"></inputPwd>
            <inputPwd tips="重新输入新密码" @sendPwdToParent="getPwdFromChildAgain"></inputPwd>
        </div>
        <div class="blank-9"></div>
        <div class="default-btn">
            <mt-button type="primary" size="large" :disabled="(inputValuePhone&&inputValueCode&&inputValuePwd&&inputValuePwdAgain)?false:true" @click.native="editPwd">完成</mt-button>
        </div>
        <div class="tips">密码可使用字母、数字、字符组合，限8-20位</div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import countdown from "@/components/Countdown/index"
import inputPwd from "@/components/InputPwd/index"
import { Toast,MessageBox } from 'mint-ui';
import { validatePhone, validateLoginpwd } from '@/utils/validate'
import { UpdateLoginPassword } from '@/api/login'
export default {
    name: 'App',
    data(){
        return {
            inputValuePhone:'',
            inputValueCode:'',
            inputValuePwd:'',
            inputValuePwdAgain:'',

            from:''
        }
    },
    components:{
        countdown,
        inputPwd
    },
    mounted(){
        this.from = this.$route.params.from;
    },
    methods:{
        ...mapMutations('app', [
            'set_isShowLoginModal'
        ]),
        getValueFromChild(value){
            this.inputValueCode = value;
        },
        getPwdFromChild(value){
            this.inputValuePwd = value;
        },
        getPwdFromChildAgain(value){
            this.inputValuePwdAgain = value;
        },
        editPwd(){
            if( validatePhone(this.inputValuePhone) ){
                if( !validateLoginpwd(this.inputValuePwd) ){
                    Toast({
                        message: "新密码格式错误",
                        iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                    })
                }else if( !validateLoginpwd(this.inputValuePwdAgain) ){
                    Toast({
                        message: "重复输入的新密码格式错误",
                        iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                    })
                }else{
                    if( this.inputValuePwd == this.inputValuePwdAgain ){
                        UpdateLoginPassword({
                            mobile:this.inputValuePhone,
                            validationCode: this.inputValueCode,
                            loginPassword: this.inputValuePwd
                        }).then(res => {
                            if( res.code == 200 ){
                                if( this.from == 'editLoginPwd' ){
                                    //从设置-修改登入密码 跳转而来
                                    MessageBox({
                                        title: '提醒',
                                        message: '设置成功',
                                        confirmButtonText:'我知道了'
                                    }).then(action => {
                                        this.$router.push('/account/setting');
                                    });

                                }else{
                                    //从登录页面 跳转而来
                                    MessageBox({
                                        title: '提醒',
                                        message: '设置成功',
                                        confirmButtonText:'我知道了'
                                    }).then(action => {
                                        this.$router.push('/login');
                                    });
                                }
                            }else{
                                Toast({
                                    message: res.msg,
                                    iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                                })
                            }
                        })
                    }else{
                        Toast({
                            message: '两次密码输入不一致'
                        });
                    }
                }
            }else{
                Toast({
                    message: '请输入正确格式的手机号',
                    className: 'innputPhoneToast'
                });
            }
        },
        leftEvent(){
            this.$emit('rightEvent',1);
        },
        rightEvent(){
            this.set_isShowLoginModal(false)
        }
    }
}
</script>

<style lang="stylus" scoped>
.findpwd{
    padding-top:50px;
    .iconStep{
        width:100%;
        margin:0 auto;
        height:100px;
        background:#F2F3F9;
        padding:27px 15%;
        display:flex;
        .line{
            height:100%;
            position:relative;
            &::before{
                content:"";
                width:80%;
                height:1px;
                background:#C6CED9;
                position:absolute;
                left:10%;
                top:30%;
            }
        }
        &>div{
            flex:1;
            text-align: center;
            &.active{
                color:#5f88ff;
            }
            color:#C6CED9;
            .icon{
                font-size:22px;
                display:block;
                margin-bottom: 5px;
            }
            span{
                font-size:11px;
            }
        }
    }
    .tips{
        color:#BFBFBF;
    }
}
</style>
